<template>
    <div class="video-nav">
        <div class="alltags" ref="alltaglist" @click="showAllTags">
            <div class="all">
                <span>{{ info.tagTitle }}</span>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </div>
        <transition enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut">
            <div class="all-tag-list" v-if="info.isShow">
                <div class="body">
                    <!-- <div class="title">
                        <div class="tname" @click="changeTagTitle">
                            <span :class="{ activeHot: info.tagTitle === '全部视频' }">全部视频</span>
                        </div>
                    </div> -->
                    <div class="all-tag-item">
                        <div class="item" v-for="(item, index) in allTag" :key="item.id"
                            :class="{ activeHot: info.currentIndexA == index }" @click="changeIndexA(item, index)">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <div class="hottags">
            <div class="hottags-item" v-for="(item, index) in hotTag" :key="item.id"
                :class="{ activeHot: info.currentIndexH == index }" @click="changeIndexH(item, index)">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script setup>
import 'animate.css';
import { reactive, onMounted, getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const props = defineProps({
    hotTag: Array,
    allTag: Array,
})
const emit = defineEmits(['tagClick'])
const info = reactive({
    tagTitle: '现场',
    currentIndexH: 0,
    currentIndexA: 0,
    isShow: false,
})
//修改热门标签
function changeIndexH(item, index) {
    info.currentIndexH = index
    emit('tagClick', item)
    //查找热门标签在全部标签中的下标
    let i = props.allTag.findIndex(ele => {
        return item.name == ele.name
    })
    info.currentIndexA = i
    info.tagTitle = item.name
}
//展示全部标签
function showAllTags() {
    info.isShow = !info.isShow
}

//点击全部视频
// function changeTagTitle() {
//     info.tagTitle = '全部视频'
//     info.currentIndexA = null
//     emit('tagClick',58100)   //默认是现场
// }


//点击全部标签中的某一个
function changeIndexA(item, index) {
    info.currentIndexA = index
    info.tagTitle = item.name
    emit('tagClick', item)
    //若找到热门数组中也有 当前点击的标签名 返回其在热门数组中的下标
    let i = props.hotTag.findIndex(ele => {
        return item.name == ele.name
    })
    info.currentIndexH = i
}

//监听点击其他区域就关闭所有歌单标签函数
onMounted(() => {
    document.addEventListener('click', (event) => {
        //获取ref节点元素
        let all = instance.ctx.$refs.alltaglist
        if (all) {
            //若点击的不是被打上ref节点的元素，就关闭
            if (!all.contains(event.target)) {
                info.isShow = false
            }
        }
    })
})

</script>

<style lang="scss" scoped>
.video-nav {
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .alltags {
        .all {
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-left: 10px;
            border-radius: 15px;
            padding: 5px 15px;
            border: 1px solid #d8d8d8;

            &:hover {
                background-color: #f2f2f2;
            }
        }
    }

    .all-tag-list {
        position: absolute;
        top: 35px;
        left: 10px;
        width: 740px;
        height: 650px;
        background: white;
        z-index: 99;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 5px #eee;

        .body {
            margin: 10px 20px;
            cursor: pointer;

            .title {
                height: 50px;
                border-bottom: 1px solid #e5e5e5;

                .tname {
                    line-height: 50px;
                    width: 100px;
                }

                .tname:hover {
                    color: #fd544e;
                }
            }
        }

        .all-tag-item {
            width: 700px;
            height: 580px;
            // display: flex;
            display: grid;
            justify-content: space-around;
            align-content: space-between;
            grid-template-columns: repeat(5, 20%); //规定网格布局的列数和每列占有的比例
            overflow-y: scroll;
            overflow-x: hidden;

            .item {
                text-align: center;
                margin: 13px 5px;

                &:hover {
                    color: #fd544e;
                }
            }
        }
    }

    .hottags {
        display: flex;
        justify-content: space-between;

        &-item {
            cursor: pointer;
            color: #676767;
            font-size: 12px;
            padding: 0 15px;
            display: flex;
            align-items: center;

            &:hover {
                color: black;
            }
        }
    }
}

.activeHot {
    border-radius: 15px;
    color: #fd544e !important;
    background-color: #fff6f6;
}
</style>